<template>
  <el-row :gutter="20" class="gauge-row">
    <el-col :span="8" v-for="(gauge, index) in gaugeData" :key="index">
      <dv-border-box-8 class="tech-gauge-card">
        <div class="gauge-title">{{ gauge.title }}</div>
        <dv-active-ring-chart :config="gauge.config" />
      </dv-border-box-8>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'GaugeCharts',
  props: {
    gaugeData: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.gauge-row {
  margin-bottom: 20px;
}

.tech-gauge-card {
  background-color: rgba(0, 20, 40, 0.7);
  padding: 15px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge-title {
  font-size: 16px;
  font-weight: 600;
  color: #00c0ff;
  text-shadow: 0 0 10px rgba(0, 192, 255, 0.7);
  margin-bottom: 10px;
}
</style>